<template>
  <div class="console">
    <!--数据卡片-->
    <n-grid class="pb-5" cols="1 s:2 m:3 l:4 xl:3 2xl:3" responsive="screen" :x-gap="12" :y-gap="8">
      <n-grid-item>
        <NCard :segmented="{ content: true, footer: true }" size="small" :bordered="false">
          <div class="flex px-1 pt-24 py-1 flex-col" style="align-items: center; height: 273px">
            <div class="pb-8 flex">
              <img src="/src/assets/images/index2.png" alt="" style="width: 32px; height: 39px" />
              <span style="font-size: 22px" class="pl-1">过期未检数量</span>
            </div>
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo v-else :startVal="0" :endVal="visits" class="text-3xl inspected" />
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard :segmented="{ content: true, footer: true }" size="small" :bordered="false">
          <div class="flex px-1 pt-24 py-1 flex-col" style="align-items: center; height: 273px">
            <div class="pb-8 flex">
              <img src="/src/assets/images/index2.png" alt="" style="width: 32px; height: 39px" />
              <span style="font-size: 22px" class="pl-1">报废数量</span>
            </div>
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo v-else :startVal="0" :endVal="saleroom" class="text-3xl scrap" />
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard :segmented="{ content: true, footer: true }" size="small" :bordered="false">
          <div class="flex px-1 pt-24 py-1 flex-col" style="align-items: center; height: 273px">
            <div class="pb-8 flex">
              <img src="/src/assets/images/index3.png" alt="" style="width: 30px; height: 33px" />
              <span style="font-size: 22px" class="pl-1">临近维修期数量</span>
            </div>
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo v-else :startVal="0" :endVal="orderLarge" class="text-3xl maintain" />
          </div>
        </NCard>
      </n-grid-item>
    </n-grid>
    <n-card :bordered="false" class="proCard">
      <div>
        <!-- <div class="flex justify-between">
          <div class="flex tabs">
            <div :class="[current == 0 ? 'active' : '']" @click="changeTabs(0)">单位</div>
            <div :class="[current == 1 ? 'active' : '']" @click="changeTabs(1)">车间</div>
          </div>

          <router-link :to="{ name: 'type' }">详情</router-link>
        </div> -->
        <BasicTable
          :columns="columns"
          :request="loadDataTable"
          :row-key="(row: ListData) => row.id"
          ref="actionRef"
          :actionColumn="actionColumn"
          :scroll-x="1090"
        >
        </BasicTable>
      </div>
    </n-card>
  </div>
</template>
<script lang="ts" setup>
  import { getConsoleInfo } from '@/api/dashboard/console';
  import { useECharts } from '@/hooks/web/useECharts';
  import { h, reactive, ref, onMounted } from 'vue';
  import { BasicTable } from '@/components/Table';
  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
  import { getNums,getManageList} from '@/api/api';
  import { PlusOutlined } from '@vicons/antd';
  import { columns, ListData } from './columns';
  import { useRouter } from 'vue-router';
  import { type FormRules } from 'naive-ui';
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
 
  const loading = ref(true);
  const visits = ref<any>({});
  const saleroom = ref<any>({});
  const orderLarge = ref<any>({});
  const volume = ref(<any>{});
  const current = ref(0);
  onMounted(async () => {
    const data = await getNums();
    console.log(data.expire)
    visits.value = data.expire;
    saleroom.value = data.scrap;
    orderLarge.value = data.approach;
    volume.value = data.expire;
    loading.value = false;
  });

  const formBtnLoading = ref(false);
  const formParams = reactive({
    name: '',
    role: null,
    droit: true,
  });

  const changeTabs = (index) => {
    console.log(index);
    current.value = index;
  };
  const loadDataTable = async (res) => {
    return await getManageList({ ...res });
  };
 
  function reloadTable() {
    actionRef.value.reload();
  }
</script>

<style lang="less" scoped>
  .text-3xl {
    font-weight: bold;
    font-size: 52px !important;
  }
  .inspected {
    color: #f4b919;
  }
  .scrap {
    color: #06bb9a;
  }
  .maintain {
    color: #8e7ef0;
  }
  .tabs {
    font-size: 14px;
    padding: 20px 0;
    div {
      cursor: pointer;
      background: #f5f7fa;
      padding: 5px 20px;
      border-radius: 4px 4px 4px 4px;
    }
    .active {
      color: #fff;
      background: #8e7ef0;
    }
  }
</style>
